<template>
  <div>
    <div class="container" title="评价">
      <h2><Strong>星级：</Strong></h2>
      <el-rate v-model="star" style="margin-top: 10px"></el-rate>
      <h2 style="margin-top: 10px"><Strong>评论：</Strong></h2>
        <el-input
            type="textarea"
            :autosize="{ minRows: 10, maxRows: 15}"
            placeholder="请输入评论"
            v-model="content"
            style="margin-top: 20px">
        </el-input>
        <div style="margin-top: 50px;text-align: center">
          <el-button type="primary" @click="submit">提交</el-button>
        </div>
    </div>
  </div>
</template>

<script>
import {createComment} from "@/api/product";

export default {
  name: "Comment",
  props: {
    productId: {
      type: Number,
      default: 1
    },
    memberId: {
      type: String,
      default: 1
    }
  },
  data() {
    return {
      content: "",
      memberId: 1,
      productId: 1,
      star:5
    }
  },
  watch: {
    memberId: {
      handler(val) {
        this.memberId = val;
      },
      immediate: true
    },
    productId: {
      handler(val) {
        this.productId = val;
      },
      immediate: true
    }
  },
  methods: {
    submit() {
      let params = {
        memberId: this.memberId,
        productId: this.productId,
        content: this.content,
        star: this.star
      }
      createComment(params).then(res => {
        this.$message.success("评论成功");
        this.$router.push({
          path: this.$router.push({path: '/front/detail', query: {id: this.productId}})
        })
      })
    }
  }
}
</script>

<style>

</style>